import React, { useState, useRef, useEffect } from 'react'
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import './index.scss'

// 使用原生 fetch API 而不是 OpenAI 库
interface Message {
  id: number
  text: string
  isUser: boolean
  timestamp: Date
}

function Index() {
  const navigate = useNavigate()
  const [inputValue, setInputValue] = useState('')
  const [messages, setMessages] = useState<Message[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const [showEmojiPicker, setShowEmojiPicker] = useState(false)

  // 表情包数据
  const emojis = [
    '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
    '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
    '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜',
    '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏',
    '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
    '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠',
    '😡', '🤬', '🤯', '😳', '🥵', '🥶', '😱', '😨',
    '😰', '😥', '😓', '🤗', '🤔', '🤭', '🤫', '🤥',
    '😶', '😐', '😑', '😬', '🙄', '😯', '😦', '😧',
    '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐',
    '🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑',
    '🤠', '😈', '👿', '👹', '👺', '🤡', '💩', '👻',
    '💀', '☠️', '👽', '👾', '🤖', '🎃', '😺', '😸',
    '😹', '😻', '😼', '😽', '🙀', '😿', '😾', '👶',
    '👧', '🧒', '👦', '👩', '🧑', '👨', '👵', '🧓',
    '👴', '👲', '👳', '👳‍♂️', '👳‍♀️', '🧕', '👮', '👮‍♂️',
    '👮‍♀️', '👷', '👷‍♂️', '👷‍♀️', '💂', '💂‍♂️', '💂‍♀️', '🕵️',
    '🕵️‍♂️', '🕵️‍♀️', '👩‍⚕️', '👨‍⚕️', '👩‍🌾', '👨‍🌾', '👩‍🍳', '👨‍🍳',
    '👩‍🎓', '👨‍🎓', '👩‍🎤', '👨‍🎤', '👩‍🏫', '👨‍🏫', '👩‍🏭', '👨‍🏭',
    '👩‍💻', '👨‍💻', '👩‍💼', '👨‍💼', '👩‍🔧', '👨‍🔧', '👩‍🔬', '👨‍🔬',
    '👩‍🎨', '👨‍🎨', '👩‍🚒', '👨‍🚒', '👩‍✈️', '👨‍✈️', '👩‍🚀', '👨‍🚀',
    '👩‍⚖️', '👨‍⚖️', '👰', '🤵', '👸', '🤴', '🦸', '🦸‍♂️',
    '🦸‍♀️', '🦹', '🦹‍♂️', '🦹‍♀️', '🤶', '🎅', '🧙', '🧙‍♂️',
    '🧙‍♀️', '🧚', '🧚‍♂️', '🧚‍♀️', '🧛', '🧛‍♂️', '🧛‍♀️', '🧜',
    '🧜‍♂️', '🧜‍♀️', '🧝', '🧝‍♂️', '🧝‍♀️', '🧞', '🧞‍♂️', '🧞‍♀️',
    '🧟', '🧟‍♂️', '🧟‍♀️', '🙍', '🙍‍♂️', '🙍‍♀️', '🙎', '🙎‍♂️',
    '🙎‍♀️', '🙅', '🙅‍♂️', '🙅‍♀️', '🙆', '🙆‍♂️', '🙆‍♀️', '💁',
    '💁‍♂️', '💁‍♀️', '🙋', '🙋‍♂️', '🙋‍♀️', '🧏', '🧏‍♂️', '🧏‍♀️',
    '🙇', '🙇‍♂️', '🙇‍♀️', '🤦', '🤦‍♂️', '🤦‍♀️', '🤷', '🤷‍♂️',
    '🤷‍♀️', '👨‍⚕️', '👩‍⚕️', '👨‍⚕️', '👩‍⚕️', '👨‍⚕️', '👩‍⚕️', '👨‍⚕️'
  ]

  // 选择表情
  const selectEmoji = (emoji: string) => {
    setInputValue(prev => prev + emoji)
    setShowEmojiPicker(false)
  }

  // 获取当前实时信息
  const getCurrentInfo = () => {
    const now = new Date()
    const currentDate = now.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      weekday: 'long'
    })
    const currentTime = now.toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })

    return {
      date: currentDate,
      time: currentTime,
      timestamp: now.toISOString()
    }
  }

  // 聊天历史记录，用于AI上下文
  const historyRef = useRef([
    {
      role: "system",
      content: `你是 Kimi, 由 Moonshot AI 提供的人工智能助手。你更擅长中文和英文的对话。你会为用户提供安全,有帮助,准确的信息。

重要：你可以访问实时信息。
当前时间：{getCurrentInfo().date} ${getCurrentInfo().time}
时间戳：${getCurrentInfo().timestamp}

当用户询问日期、时间、天气等相关问题时，请使用上述实时信息回答。对于天气信息，你可以基于当前日期和季节给出合理的天气描述，或者建议用户查询专业天气应用获取准确信息。`
    }
  ])

  // 消息容器引用，用于自动滚动
  const messagesEndRef = useRef<HTMLDivElement>(null)

  // 自动滚动到底部
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }

  // 清理AI回答中的Markdown格式符号
  const cleanAIText = (text: string) => {
    return text
      .replace(/\*\*(.*?)\*\*/g, '$1') // 移除 **加粗** 格式
      .replace(/\*(.*?)\*/g, '$1') // 移除 *斜体* 格式
      .replace(/`(.*?)`/g, '$1') // 移除 `代码` 格式
      .replace(/#{1,6}\s*/g, '') // 移除标题格式
      .replace(/\[(.*?)\]\(.*?\)/g, '$1') // 移除链接格式，保留文本
      .replace(/\n\n/g, '\n') // 减少多余换行
      .trim()
  }

  // 当消息更新时自动滚动
  useEffect(() => {
    scrollToBottom()
  }, [messages, isLoading])

  // API 配置
  const API_KEY = "sk-8dydRQjgnKiM1Wg0xH6lxTgA8agLLEnQaHw2FnBY1WnbMAjk"
  const API_BASE_URL = "https://api.moonshot.cn/v1"

  // AI 聊天功能 - 使用原生 fetch API
  const chat = async (prompt: string, retryCount: number = 0) => {
    try {
      console.log('开始AI请求...', prompt)
      console.log('使用API密钥:', API_KEY.substring(0, 10) + '...')

      // 更新系统提示词中的实时信息
      const currentInfo = getCurrentInfo()
      historyRef.current[0] = {
        role: "system",
        content: `你是 Kimi, 由 Moonshot AI 提供的人工智能助手。你更擅长中文和英文的对话。你会为用户提供安全,有帮助,准确的信息。

重要：你可以访问实时信息。
当前时间：{currentInfo.date} ${currentInfo.time}
时间戳：${currentInfo.timestamp}

当用户询问日期、时间、天气等相关问题时，请使用上述实时信息回答。对于天气信息，你可以基于当前日期和季节给出合理的天气描述，或者建议用户查询专业天气应用获取准确信息。`
      }

      // 添加用户消息到历史记录
      historyRef.current.push({
        role: "user",
        content: prompt
      })

      console.log('发送请求到AI...')

      // 使用原生 fetch API 发送请求
      const response = await fetch(`${API_BASE_URL}/chat/completions`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${API_KEY}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          model: "kimi-k2-0905-preview",
          messages: historyRef.current,
          temperature: 0.7,
          max_tokens: 2000
        })
      })

      console.log('响应状态:', response.status, response.statusText)

      if (!response.ok) {
        const errorText = await response.text()
        console.error('API响应错误:', errorText)
        throw new Error(`API请求失败: ${response.status} - ${errorText}`)
      }

      const data = await response.json()
      console.log('AI响应成功:', data.choices[0].message.content)

      // 更新历史记录
      historyRef.current.push(data.choices[0].message)

      return data.choices[0].message.content
    } catch (error: unknown) {
      const err = error as Error
      console.error('AI 请求失败详情:', {
        message: err.message,
        name: err.name,
        stack: err.stack,
        fullError: error
      })

      // 详细的错误处理
      if (err.message?.includes('API密钥')) {
        return 'API密钥配置错误，请检查环境变量设置'
      } else if (err.message?.includes('timeout')) {
        return '请求超时，请稍后重试'
      } else if (err.message?.includes('network') || err.message?.includes('fetch')) {
        return '网络连接失败，请检查网络设置'
      } else if (err.message?.includes('401')) {
        return 'API密钥无效，请检查密钥是否正确'
      } else if (err.message?.includes('429')) {
        // 自动重试机制，最多重试3次
        if (retryCount < 3) {
          console.log(`检测到频率限制，自动重试中... (${retryCount + 1}/3)`)
          await new Promise(resolve => setTimeout(resolve, 1000 * (retryCount + 1))) // 递增等待时间
          return await chat(prompt, retryCount + 1) // 递归重试
        } else {
          return '请求过于频繁，已自动重试3次，请稍后再试'
        }
      } else if (err.message?.includes('CORS')) {
        return 'CORS错误，请检查网络设置'
      } else {
        return `请求失败: ${err.message || '未知错误'}`
      }
    }
  }

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value)
  }

  const handleSubmit = async () => {
    if (inputValue.trim() && !isLoading) {
      // 添加用户消息
      const userMessage: Message = {
        id: Date.now(),
        text: inputValue.trim(),
        isUser: true,
        timestamp: new Date()
      }

      setMessages(prev => [...prev, userMessage])
      const currentInput = inputValue.trim()
      setInputValue('')
      setIsLoading(true)

      try {
        console.log('用户输入:', currentInput)

        // 调用 AI 接口
        const aiResponse = await chat(currentInput)

        console.log('AI回复:', aiResponse)

        // 添加 AI 回复
        const botMessage: Message = {
          id: Date.now() + 1,
          text: aiResponse || '抱歉，我无法理解您的问题。',
          isUser: false,
          timestamp: new Date()
        }
        setMessages(prev => [...prev, botMessage])
      } catch (error: unknown) {
        const err = error as Error
        console.error('处理AI回复时出错:', err)

        // 如果 AI 调用失败，使用默认回复
        const botMessage: Message = {
          id: Date.now() + 1,
          text: `处理您的请求时出现错误: ${err.message || '未知错误'}`,
          isUser: false,
          timestamp: new Date()
        }
        setMessages(prev => [...prev, botMessage])
      } finally {
        setIsLoading(false)
      }
    }
  }

  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleSubmit()
    }
  }


  return (
    <div className='ailt'>
      <div className='ailt-top'>
        <span><LeftOutline className='ailt-top-left' onClick={() => navigate(-1)} /></span>
        <span className='ailt-top-title'>智能客服</span>
      </div>

      {/* 聊天消息区域 */}
      <div className='ailt-messages'>
        {messages.length === 0 ? (
          <div className='ailt-welcome'>
            <p>您好！我是 Kimi 智能助手，有什么可以帮助您的吗？</p>
          </div>
        ) : (
          <>
            {messages.map((message) => (
              <div key={message.id} className={`ailt-message ${message.isUser ? 'ailt-message-user' : 'ailt-message-bot'}`}>
                <div className='ailt-message-content'>
                  {message.isUser ? message.text : cleanAIText(message.text)}
                </div>
                <div className='ailt-message-time'>
                  {message.timestamp.toLocaleTimeString()}
                </div>
              </div>
            ))}
            {isLoading && (
              <div className='ailt-message ailt-message-bot'>
                <div className='ailt-message-content'>
                  <div className='ailt-loading'>
                    <span>Kimi 正在思考中</span>
                    <span className='ailt-loading-dots'>...</span>
                  </div>
                </div>
              </div>
            )}
            {/* 滚动锚点 */}
            <div ref={messagesEndRef} />
          </>
        )}
      </div>

      {/* 表情包选择器 */}
      {showEmojiPicker && (
        <div className='emoji-picker'>
          <div className='emoji-picker-header'>
            <span>选择表情</span>
            <button 
              className='emoji-picker-close'
              onClick={() => setShowEmojiPicker(false)}
            >
              ×
            </button>
          </div>
          <div className='emoji-grid'>
            {emojis.map((emoji, index) => (
              <button
                key={index}
                className='emoji-item'
                onClick={() => selectEmoji(emoji)}
              >
                {emoji}
              </button>
            ))}
          </div>
        </div>
      )}

      {/* 底部聊天输入框 */}
      <div className='ailt-input-container'>
        <div className='ailt-microphone-icon'>
          <img src="../../../public/58.png" alt="" className='ailt-microphone-icon-img' />
        </div>
        <input
          type="text"
          className='ailt-input'
          placeholder="请简述您的问题"
          value={inputValue}
          onChange={handleInputChange}
          onKeyPress={handleKeyPress}
        />
        <button 
          className='emoji-button'
          onClick={() => setShowEmojiPicker(!showEmojiPicker)}
        >
          😊
        </button>
      </div>
    </div>
  )
}

export default Index